<template>
  <div>
    <div>拉伸ExtrudeGeometry</div>
    <div ref="webgl" id="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    const width = 500;
    const height = 300;
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    const pointLight = new THREE.PointLight(0xffffff);

    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    const material = new THREE.MeshLambertMaterial({
      color: 0x11ffff,
      transparent: true, //开启透明
      opacity: 0.7, //设置透明度
      // side: THREE.DoubleSide,
    });
    // 一组二维向量表示一个多边形轮廓坐标
    const pointsArr = [
      new THREE.Vector2(-50, -50),
      new THREE.Vector2(-60, 0),
      new THREE.Vector2(0, 50),
      new THREE.Vector2(60, 0),
      new THREE.Vector2(50, -50),
    ];
    // Shape表示一个平面多边形轮廓,参数是二维向量构成的数组pointsArr
    const shape = new THREE.Shape(pointsArr);
    //拉伸造型
    // const geometry = new THREE.ExtrudeGeometry(
    //   shape, //二维轮廓
    //   {
    //     depth: 20, //拉伸长度
    //   },
    // );
    //倒圆角
    const geometry = new THREE.ExtrudeGeometry(shape, {
      depth: -100,
      bevelThickness: 5, //倒角尺寸:拉伸方向
      bevelSize: 5, //倒角尺寸:垂直拉伸方向
      bevelSegments: 20, //倒圆角：倒角细分精度，默认3
    });
    const materialMesh = new THREE.Mesh(geometry, material);
    scene.add(materialMesh);
    const shape2 = new THREE.Shape([
      // 按照特定顺序，依次书写多边形顶点坐标
      new THREE.Vector2(0, 0), //多边形起点
      new THREE.Vector2(0, 10),
      new THREE.Vector2(10, 10),
      new THREE.Vector2(10, 0),
    ]);
    // 扫描轨迹：创建轮廓的扫描轨迹(3D样条曲线)
    const curve2 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-10, -50, -50),
      new THREE.Vector3(10, 0, 0),
      new THREE.Vector3(8, 50, 50),
      new THREE.Vector3(-5, 0, 100),
    ]);
    //扫描造型：扫描默认没有倒角
    const geometry2 = new THREE.ExtrudeGeometry(
      shape2, //扫描轮廓
      {
        extrudePath: curve2, //扫描轨迹
        steps: 10, //沿着路径细分精度，越大越光滑
      },
    );

    const materialMesh2 = new THREE.Mesh(geometry2, material);
    scene.add(materialMesh2);

    renderFun();
  }
  function renderFun() {
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
